<template>
  <div class="register-container">
    <!-- 返回导航栏 -->
    <van-nav-bar title="返回" left-arrow @click-left="doReturnPage" style="margin-bottom: 20px"/>

    <!-- 标题图片 -->
    <div class="image-wrapper">
      <van-image
          fit="contain"
          position="center"
          width="280px"
          src="https://javawebprogram.oss-cn-beijing.aliyuncs.com/0bccf4e6-d60d-4dae-b89c-6847c0a04935.jpg"
      />
    </div>

    <!-- 注册标题 -->
    <h1 class="register-title">注册</h1>

    <!-- 注册表单 -->
    <van-form @submit="onSubmit" class="register-form">
      <van-cell-group inset>
        <van-field
            ref="accountField"
            v-model="userAccount"
            name="userAccount"
            label="账号"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '账号不能为空' }]"
            left-icon="manager-o"
        />
        <van-field
            v-model="userPassword"
            type="password"
            name="userPassword"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '密码不能为空' }]"
            left-icon="flower-o"
        />
        <van-field
            v-model="checkPassword"
            type="password"
            name="checkUserPassword"
            label="密码确认"
            placeholder="请再次输入密码"
            :rules="[{ required: true, message: '再次输入的密码不能为空' }]"
            left-icon="flower-o"
        />
        <van-field
            v-model="planetCode"
            name="planetCode"
            label="社区编号"
            placeholder="请输入专属社区编号"
            :rules="[{ required: true, message: '社区编号不能为空' }]"
            left-icon="gem-o"
        >
          <template #right-icon>
            <van-icon name="question-o" @click="doHelpDialog"/>
          </template>
        </van-field>

      </van-cell-group>
      <van-button round block type="primary" native-type="submit" class="submit-btn">
        注册
      </van-button>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {showDialog, showFailToast, showSuccessToast} from 'vant'
import 'vant/lib/index.css'
import {userRegister} from "../../api/User.ts";

const router = useRouter()

// 输入框引用
const userAccount = ref('');
const userPassword = ref('');
const checkPassword = ref('');
const planetCode = ref('');
const accountField = ref();

/**
 * 钩子函数
 */
onMounted(() => {
})

/**
 * 注册
 */
const onSubmit = async () => {
  const result = await userRegister(userAccount.value, userPassword.value, checkPassword.value, planetCode.value)
  // @ts-ignore
  if (result.code === 0 && result.data) {
    showSuccessToast('注册成功');
    await router.push('/user/login');
  } else {
    // @ts-ignore
    showFailToast('注册失败,' + (result.description ? `${result.description}` : ''))
  }
}

/**
 * 返回登录页
 */
const doReturnPage = () => {
  router.back();
}

/**
 * 显示社区编号提示说明
 */
const doHelpDialog = () => {
  showDialog({
    title: '社区编号',
    message:
        '社区编号是您在该系统中的唯一标识，请勿重复填写',
  });
}

</script>

<style scoped>
.register-container {
  background-color: #f9f9f9;
  color: #333;
  transition: all 0.3s ease;
}

.image-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.register-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  color: #333333;
  font-family: "楷体", sans-serif;
  margin-bottom: 20px;
  transition: color 0.3s ease;
}


.register-form {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 20px;
  transition: background-color 0.3s ease;
}

.submit-btn {
  margin-top: 20px;
}

.register-link {
  text-align: right;
  margin-top: 20px;
}

</style>

